<template>
    <div class="drawer_box">
      <div class="btn_box" style="margin-right: 10px">
        <div
          @click="btnClick(item, index)"
          :class="{ isAtv: isIndex == index }"
          class="itemz flex_center_center"
          v-for="(item, index) in jqArrCv"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <div style="width: 90%" class="isTable">
        <div style="margin-bottom: 10px" >
          <el-date-picker
            v-model="datePicker"
            type="date"
            placeholder="选择日期"
            size="default"
            value-format="YYYY-MM-DD"
            @change="chanse"
          />
        </div>
        <el-table
          :data="tableDatas"
          fit
          highlight-current-row
          stripe
          style="width: 100%"
          border
             @cell-click="cellClick"
        >
          <el-table-column prop="dates" label="整点" align="center">
            <template #default="scope">
              <div>
                {{ scope.row.date }}
              </div>
            </template>
          </el-table-column>
  
          <el-table-column prop="zcfr" label="在册" align="center">
            <template #default="scope">
              {{ scope.row.zcfr }}
            </template>
          </el-table-column>
          <el-table-column prop="zyfr" label="在押" align="center">
            <template #default="scope">
              {{ scope.row.zyfr }}
            </template>
          </el-table-column>
  
          <el-table-column prop="syfr" label="实押" align="center">
            <template #default="scope">
              {{ scope.row.syfr }}
            </template>
          </el-table-column>
  
          <el-table-column prop="jnzy" label="内院" />
          <el-table-column prop="ljtq" label="探亲" />
          <el-table-column prop="jbfr" label="禁闭" />
          <el-table-column prop="cjxd" label="惩戒" />
          <el-table-column prop="jwzy" label="外院" />
          <el-table-column prop="jwzx" label="执行" />
          <el-table-column prop="jhzs" label="再审" />
        </el-table>
      </div>
    </div>
    <div>
    <el-dialog
      title="上报人员"
      v-model="dialogFormVisibleCv"
     width="1300"
    >
    <div class="isTable" style="margin-top: 20px; height: 400px;;box-sizing: border-box; padding: 0 10px;">
      <el-table
        :data="listDialog"
        fit
        highlight-current-row
        stripe
        border
      >
        <el-table-column label="时间" align="center">
          <template #default="scope">
            <span>{{ scope.row.date }}</span>
          
          </template>
        </el-table-column>
    
          <el-table-column label="监内住院" align="center">
            <template #default="scope">
              <span>{{ scope.row.jnzy }}</span>
            </template>
          </el-table-column>
          <el-table-column label="离监探亲" align="center">
            <template #default="scope">
              <span>{{ scope.row.ljtq }}</span>
            </template>
          </el-table-column>
          <el-table-column label="禁闭" align="center">
            <template #default="scope">
              <span>{{ scope.row.jbfr }}</span>
            </template>
          </el-table-column>
          <el-table-column label="惩戒训导" align="center">
            <template #default="scope">
              <span>{{ scope.row.cjxd }}</span>
            </template>
          </el-table-column>
      
      
          <el-table-column label="监外住院" align="center">
            <template #default="scope">
              <span>{{ scope.row.jwzy }}</span>
            </template>
          </el-table-column>
          <el-table-column label="监外执行" align="center">
            <template #default="scope">
              <span>{{scope. row.jwzx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="解回再审" align="center"  >
          <template #default="scope">
            <span>{{ scope.row.jhzs }}</span>
          </template>
        </el-table-column>
      
      </el-table>
    </div>
    
    </el-dialog>
  </div>
  </template>
  
  <script setup>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    Back,
    Right,
  } from "@element-plus/icons-vue";
  
  import http from "@/utils/api";
  import jjbjlTwo from "../components/jjbjlTwo.vue";
  import towZfxx from "../components/towZfxx.vue";
  import zdzf from "../components/zdzf.vue";
  import yxry from "../components/yxry.vue";
  import router from "@/router";
  import jgsb from "@/components/jgsb.vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import {
    ref,
    watch,
    onMounted,
    onBeforeUnmount,
    reactive,
    onBeforeMount,
    nextTick,
  } from "vue";
  import { defineProps, defineEmits } from "vue";
  const props = defineProps({
    sonData: {
      type: String,
      default: "",
    },
    jqArr: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: "",
    },
  });
  let dialogFormVisibleCv = ref(false)
  let dateSfm = ref("");
  let hour = ref("");
  let daydata = ref("");
  let datePicker = ref("");
  let tableDatas = ref([
    {
      date: "7:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "8:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "9:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "10:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "11:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "12:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "13:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "14:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "15:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "16:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "17:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "18:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "19:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "20:00",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      name: "--",
      jhzs: "--",
    },
    {
      date: "21:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
    {
      date: "22:00",
      name: "--",
      syfr: "--",
      tpfr: "--",
      zcfr: "--",
      zyfr: "--",
      jbfr: "--",
      cjxd: "--",
      jnzy: "--",
      jrxm: "--",
      jwzx: "--",
      jwzy: "--",
      ljtq: "--",
      jhzs: "--",
    },
  ]);
 
  const getFormattedDateTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, "0");
    const day = String(now.getDate()).padStart(2, "0");
    const hours = String(now.getHours()).padStart(2, "0");
    const minutes = String(now.getMinutes()).padStart(2, "0");
    const seconds = String(now.getSeconds()).padStart(2, "0");
    dateSfm.value = `${hours}:${minutes}:${seconds}`;
    hour.value = String(now.getHours()).padStart(2, "0");
    daydata.value = `${year}-${month}-${day}`;
  
    return `${year}-${month}-${day} ${hour.value}`;
  };
  
  let jqArrCv = ref([]);
  let isIndex = ref(0);
  let selectValue = ref("");
  const btnClick = (item, index) => {
    selectValue.value = item.id;
    isIndex.value = index;
    getClockLast();
  };
  const chanse = (row) => {
    if (row) {
      getClockLast();
    } else {
      datePicker.value = daydata.value;
      getClockLast();
    }
  };
  
  const getClockLast = async () => {
    let res = await http.zfpt.ClockLast({
      orgId: selectValue.value,
      date: datePicker.value,
      hour: "",
      async: "",
    });
    if (res && res.code == 0) {
      if (res.data.length) {
               tableDatas.value.forEach((itz)=>{
              for (let key in itz) {
                if (key != "date") {
                  itz[key] = '--';
                }
              }
          })
        res.data.forEach((item) => {
     
          tableDatas.value.forEach((itz) => {
            if (
              Number(itz.date.split(":")[0]) == Number(item.hour.split(":")[0])
            ) {
              for (let key in item) {
                if (key != "date") {
                  itz[key] = item[key];
                }
              }
            }
          });
        });
      }else{
          tableDatas.value.forEach((item)=>{
              for (let key in item) {
                if (key != "date") {
                  item[key] = '--';
                }
              } 
          }) 
      }
    }
  };
  let listDialog = ref([])
  const cellClick =  async (row)=>{
  listDialog.value = [];
  listDialog.value.push(row);
  let res = await http.zfpt.CriminalStateSelect({
    page: 1,
    limit: 999,
    orgId:selectValue.value,
    criminalNo: "",
    name: "",
    state: "jwzy,jwzx,jnzy,ljtq,jbfr,cjxd,jhzs,tpfr",
    startDate: "",
    endDate: datePicker.value + ' ' + row.date + ':00' ,
    faceType: "zd",
  });
  if(res && res.code == 0){
    const stateMap = {
        jwzy: "jwzy",
        jwzx: "jwzx",
        jnzy: "jnzy",
        ljtq: "ljtq",
        jbfr: "jbfr",
        cjxd: "cjxd",
        jhzs: "jhzs",
      };

      const stateMapCv = {
        jwzy: "",
        jwzx: "",
        jnzy: "",
        ljtq: "",
        jbfr: "",
        cjxd: "",
        jhzs: "",
      };

      res.data.data.forEach((item) => {
          if (stateMap[item.state]) {
            stateMapCv[stateMap[item.state]] += "," + item.name;
          }
        });
        for (let key in stateMapCv) {
          if (stateMapCv[key]) {
            stateMapCv[key] = stateMapCv[key].substring(1);
          }
        }
        dialogFormVisibleCv.value = true;
        listDialog.value.push(stateMapCv)
  }
}

  
  watch(
    () => props.jqArr,
    (newValue, oldValue) => {
      if (newValue) {
        getFormattedDateTime();
        datePicker.value = daydata.value;
        if (props.jqArr) {
          // optionsS.value = props.jqArr;
          // selectValue.value = optionsS.value[0].id;
          jqArrCv.value = JSON.parse(JSON.stringify(props.jqArr));
          let arr = [];
       arr = jqArrCv.value.filter((item) => item.name.includes("监区"));

       jqArrCv.value = arr;
          let allJq = jqArrCv.value.map((itz) => itz.id);
          selectValue.value = allJq[0];
  
          // jqArrCv.value.unshift(allObj);
          getClockLast();
        }
      } else {
      }
    },
    {
      deep: true, // 深度监听
      immediate: true, // 立即触发回调
    }
  );
  </script>
  
  <style scoped lang="scss">

    ::v-deep .el-input__wrapper {
    background-color: rgba(15, 82, 163, 0.278);
    box-shadow: (0 0 0 1px rgba(15, 82, 163, 0.61)) inset;
  }
  ::v-deep .el-input__inner {
    color: white;
  }
  ::v-deep .el-input__prefix {
    color: white;
  }

  .isAtv {
    background-color: rgb(4 110 250 / 27%) !important;
    font-weight: bold;
  }
  .drawer_box {
    width: 100%;
    display: flex;
    padding: 0 10px;
    height: 100%;
    box-sizing: border-box;
  }
  
  ::v-deep .isTable .el-table {
    background-color: rgb(8, 32, 78) !important;
    .el-table tr {
      background-color: rgb(8, 32, 78) !important;
    }
    .cell {
      height: 30px;
      color: #fff;
      text-align: center;
      // border: 1px solid #ccc;
      background: rgb(8, 32, 78) !important;
      font-size: 12px;
      line-height: 30px;
    }
    .el-table__cell {
      border-color: 1px solid rgb(5, 112, 146);
      padding: 2px 0px !important;
      background: rgb(8, 32, 78) !important;
    }
    .el-table--fit .el-table__inner-wrapper:before {
      display: none !important;
    }
    .el-table th.el-table__cell.is-leaf {
      border: none !important;
    }
    --el-table-border-color: rgb(5, 112, 146);
  }
  </style>
  